<template>
  <el-dialog
    v-el-drag-dialog
    title="投诉单详情"
    :visible.sync="visible"
    width="1024px"
  >
    <div class="container">
      <div class="detail">
        <h3>报修明细</h3>
        <div class="item">
          <el-descriptions size="medium">
            <el-descriptions-item label="报修单号">{{ detailData.repairCode }}</el-descriptions-item>
            <el-descriptions-item label="完成时间">{{ detailData.signDt ? moment(detailData.signDt).format('YYYY-MM-DD hh:mm') : '' }}</el-descriptions-item>
            <el-descriptions-item label="客户编号">{{ detailData.csmCode }}</el-descriptions-item>
            <el-descriptions-item label="客户名称">{{ detailData.csmName }}</el-descriptions-item>
            <el-descriptions-item label="责任机构">{{ detailData.orgName }}</el-descriptions-item>
            <el-descriptions-item label="处理人">{{ detailData.userName }}</el-descriptions-item>
            <el-descriptions-item label="联系电话">{{ detailData.contactPhone }}</el-descriptions-item>
            <el-descriptions-item label="预约时间">{{ detailData.createTime | parseTime('{y}/{m}/{d} {h}:{i}') }}</el-descriptions-item>
          </el-descriptions>
          <el-descriptions size="medium" :column="1">
            <el-descriptions-item label="联系地址">{{ detailData.contactAddress }}</el-descriptions-item>
          </el-descriptions>
          <el-descriptions size="medium" :column="1">
            <el-descriptions-item label="备注">{{ detailData.remark }}</el-descriptions-item>
          </el-descriptions>
        </div>
        <div class="item">
          <div class="title">
            <span class="title-icon" />
            <span class="title-text">客户报修内容</span>
          </div>
          <p>{{ detailData.repairContent }}</p>
        </div>
        <div class="item">
          <div class="title">
            <span class="title-icon" />
            <span class="title-text">维修员问题反馈</span>
          </div>
          <p>{{ detailData.marker1 }}</p>
        </div>
        <div class="item">
          <div class="title">
            <span class="title-icon" />
            <span class="title-text">客户签字</span>
          </div>
          <p>{{ detailData.repairContent }}</p>
        </div>
        <div class="item">
          <div class="title">
            <span class="title-icon" />
            <span class="title-text">报修照片</span>
          </div>
          <p>{{ detailData.repairContent }}</p>
        </div>
      </div>
      <div class="circul">
        <h3>流转信息</h3>
        <circul ref="circul" />
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false">
        取消
      </el-button>
      <el-button v-if="detailData.rstatus === 2" type="primary" @click="$emit('openPressOrder', detailData.rstatus)">催单</el-button>
      <el-button v-if="detailData.rstatus === 1 || detailData.rstatus === 2 || detailData.rstatus === 6" type="primary" @click="$emit('openTransferOrder', detailData.rstatus)">转派</el-button>
      <el-button v-if="detailData.rstatus === 2" type="primary" @click="$emit('dealConfirm', detailData.rstatus)">处理确认</el-button>
      <el-button v-if="detailData.rstatus === 10" type="primary" @click="$emit('openReturnVisit', detailData.rstatus)">回访</el-button>
      <el-button v-if="detailData.rstatus === 2 || detailData.rstatus === 6" type="primary" @click="$emit('openBackOrder', detailData.rstatus)">退单/确认</el-button>
      <el-button type="primary" @click="$emit('openRemark', detailData.rstatus)">备注</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { queryRepairOrderDetail } from '@/api'
  import { parseTime } from '@/filters'
  import moment from 'dayjs'
  import Circul from './Circul'

  export default {
    name: 'detail',
    components: {
      Circul
    },
    filters: {
      parseTime
    },
    data() {
      return {
        visible: false,
        detailData: {}
      }
    },
    methods: {
      moment,
      async open(temp) {
        await this.getDetail(temp)
        return new Promise(resolve => {
          this.resolve = resolve
          this.visible = true
        })
      },
      async getDetail(temp) {
        const res = await queryRepairOrderDetail({
          repairCode: temp.repairCode
        })
        this.detailData = res.data
      }
    }
  }
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  .detail {
    flex: 1;
    padding-right: 20px;
  }
  .circul {
    width: 300px;
    padding-left: 20px;
    border-left: 1px solid #dcdfe6;
  }
}
.item {
  margin-bottom: 28px;
  .title {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    .title-icon {
      display: inline-block;
      width: 4px;
      height: 18px;
      margin-right: 6px;
      background: #01999f;
    }
    .title-text {
      font-family: Microsoft YaHei, Microsoft YaHei-Bold;
      font-size: 14px;
      font-weight: 700;
      color: #01999f;
    }
    .content {
      margin-bottom: 28px;
    }
  }
  &:last-child {
    margin-bottom: 0;
  }
}
</style>
